<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { useUsercodeStore } from '@/store/usercode.js'

	// 创建 Store 实例
	const userCodeStore = useUsercodeStore()
	const bginfo = ref('pink-bg')
	const cardsnum = ref()
	const boxId = ref()
	const pay_type = ref()
	const caseId = ref()
	// 优惠Id
	const couponId = ref(0)
	const couponname = ref('')

	const payMoney = ref()
	const haveDraw = ref()
	const drawName = ref()
	const drawImg = ref()

	function backto() {
		uni.navigateBack({ delta: 1 })
	}

	const secondTimer = ref()

	function goRealName() {
		namepopup.value.open('center')
		uni.navigateTo({
			url: '/minePage/authentication/index',
		})
	}
	const namepopup = ref()
	async function paywxDrawMoney() {
		secondShow.value = false
		const res = await http.request({
			url: '/api/boxorder/createBoxOrder_special',
			method: 'POST',
			data: {
				id: boxId.value,
				sorce: 1,
				num: Number(cardsnum.value),
				pay_type: pay_type.value,
				coupon_id: couponId.value,
				money: payMoney.value,
			},
		})
		console.log(res)

		setTimeout(() => {
			payAgain.value = true
		}, 2000)
		if (res.st == 1) {
			secondShow.value = true
			haveDraw.value = res.data.box_goods
		} else if (res.st == -2) {
			namepopup.value.open('center')
		} else {
			uni.utils.toast(res.msg)
			setTimeout(() => {
				backto()
			}, 3000)
		}
	}

	// 支付
	const paypopup = ref()
	const paymoney = ref()
	// 优惠券之后的价格
	const realmoney = ref()
	const buyCount = ref(0)
	const agree = ref(true)
	const payAgain = ref(false)
	async function payPOP() {
		if (payAgain.value) {
			payAgain.value = false
			await getUserMoney()
			// secondShow.value = false
			// 每次点击重新选择优惠券
			realmoney.value = payMoney.value
			couponId.value = 0
			couponname.value = ''
			paypopup.value.open('bottom')
		} else {
			uni.utils.toast('让手指放松下吧，请两秒后重试~')
		}
	}
	function changePop(e) {
		console.log(e)
		if (!e.show) {
			setTimeout(() => {
				payAgain.value = true
			}, 2000)
		}
	}
	function changeAgree() {
		agree.value = !agree.value
	}

	function radioChange(evt) {
		pay_type.value = evt.detail.value
	}

	// 获取订单id
	const orderId = ref()
	async function getId() {
		const res = await http.request({
			url: '/api/boxorder/createBoxOrder_special',
			method: 'POST',
			data: {
				id: boxId.value,
				sorce: 1,
				num: Number(cardsnum.value),
				pay_type: pay_type.value,
				coupon_id: couponId.value,
				// case_id: caseId.value,
				money: payMoney.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			orderId.value = res.data
		} else if (res.st == -2) {
			namepopup.value.open('center')
		} else {
			uni.utils.toast('创建订单失败')
		}
	}
	// 微信支付
	//轮询微信支付订单状态
	const timeStatu = ref(true)
	const paying = ref(1)
	async function askTxOrder() {
		setTimeout(() => {
			timeStatu.value = false
		}, 5000)
		secondShow.value = false
		const res = await http.request({
			url: '/api/boxorder/getPayInfo',
			method: 'POST',
			data: {
				id: orderId.value,
				type: 3,
			},
		})
		console.log(res)
		setTimeout(() => {
			payAgain.value = true
		}, 2000)
		if (res.st == 1) {
			if (res.data.status == 1) {
				secondShow.value = true
				haveDraw.value = res.data.box_goods
				userCodeStore.setIsTrans(1)
				paypopup.value.close()
			} else {
				uni.utils.toast(res.data.msg)
				setTimeout(() => {
					backto()
				}, 3000)
			}
		} else {
			if (timeStatu.value) {
				askTxOrder()
			} else {
				uni.utils.toast(res.msg)
				setTimeout(() => {
					backto()
				}, 3000)
			}
		}
		paying.value = 1
	}

	async function payTXDraw() {
		timeStatu.value = true
		await getId()
		const res = await http.request({
			url: '/api/adapay/adapay/adaPayOrder',
			method: 'POST',
			data: {
				id: orderId.value,
				type: 2,
				preferential: preferential.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.navigateToMiniProgram({
				appId: res.data.expend.wx_app_id,
				path: res.data.expend.path,
				extraData: {},
				success(res) {
					// 打开成功
					paying.value = 2
				},
			})
		} else {
			uni.utils.toast('拉起支付失败，请联系客服~')
		}
	}

	//支付抽卡
	const secondShow = ref(true)
	async function goDrawCards() {
		if (!agree.value) {
			uni.utils.toast('请先同意用户协议')
			return
		}
		if (pay_type.value == 3) {
			if (Number(balance.value) < Number(realmoney.value)) {
				uni.utils.toast('卡尘不足')
				return
			}
			secondShow.value = false
			paywxDrawMoney()
			paypopup.value.close()
		} else if (pay_type.value == 1) {
			secondShow.value = false
			payTXDraw()
			paypopup.value.close()
		}
	}

	// 用户信息卡尘(暂时)
	const balance = ref(0)
	const preferential = ref()
	async function getUserMoney() {
		const res = await http.request({
			url: '/api/user/userMsg',
			method: 'POST',
			data: {},
		})
		console.log('user')
		console.log(res)
		balance.value = res.data.data.balance
		preferential.value = res.data.preferential
	}

	// 选择优惠券
	function chooseCoupon() {
		uni.navigateTo({
			url: `/drawPage/choosecoupon/index?money=${payMoney.value}&id=${boxId.value}&couponid=${couponId.value}`,
		})
	}

	function goRule(id) {
		uni.navigateTo({
			url: `/homePage/agreement/index?id=${id}`,
		})
	}

	onLoad((option) => {
		payAgain.value = false
		setTimeout(() => {
			payAgain.value = true
		}, 2000)
		secondShow.value = true
		cardsnum.value = option.num
		boxId.value = option.id
		pay_type.value = option.pay_type
		caseId.value = option.case_id
		payMoney.value = option.money
		drawName.value = option.name
		drawImg.value = option.img
		couponId.value = option.couponid
		haveDraw.value = JSON.parse(decodeURIComponent(option.thecard))
		if (haveDraw.value) {
		}
		// if (caseId.value == -1) {
		// 	console.log('wx')
		// 	paywxDrawMoney()
		// } else {
		// 	console.log('tx')
		// 	paytxDrawMoney()
		// }
	})

	onShow(() => {
		if (paying.value == 2) {
			askTxOrder()
		}
		uni.$once('thecoupon', (data) => {
			console.log(data)
			realmoney.value = payMoney.value
			if (data.coupon) {
				couponId.value = data.coupon.id
				couponname.value = data.coupon.title
				// 满减
				if (data.coupon.type == 1) {
					realmoney.value = Number(
						(payMoney.value - data.coupon.money).toFixed(2)
					)
				} else if (data.coupon.type == 2) {
					realmoney.value = Number(
						(payMoney.value - data.coupon.money).toFixed(2)
					)
				} else if (data.coupon.type == 3) {
					realmoney.value = Number(
						(payMoney.value * data.coupon.discount).toFixed(2)
					)
				}
			}
		})
	})
</script>

<template>
	<view class="cards-content">
		<view class="congratulation" :class="{ 'second-scroll': secondShow }">
		</view>
		<view class="cards">
			<!-- 单抽 -->
			<view v-if="cardsnum == 1" class="one-draw">
				<view class="card-item" style="width: 393rpx; height: 465rpx">
					<view
						class="card-front tx-card-bg"
						style="width: 393rpx; height: 465rpx"
						:class="{
							'second-rotate-content': secondShow,
						}"
					>
					</view>
					<view
						class="card-bg"
						:class="{ 'second-rotate-bg': secondShow }"
					>
					</view>
					<!-- <view class="card-png" :style="'background:url(' + chuanshuo+')'">
					</view> -->
					<image
						class="card-content"
						:class="{ 'second-rotate-content': secondShow }"
						:src="haveDraw[0].img"
						style="height: 330rpx"
						mode="heightFix"
					></image>
				</view>
			</view>
			<!-- 三抽 -->
			<view v-else-if="cardsnum == 3" class="three-draw">
				<view class="card-item-top">
					<view
						class="card-item"
						style="width: 283rpx; height: 336rpx"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 283rpx; height: 336rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[0].img"
							style="height: 230rpx"
							mode="heightFix"
						></image>
					</view>
				</view>
				<view class="card-item-bottom">
					<view
						class="card-item"
						style="
							width: 283rpx;
							height: 336rpx;
							margin-right: 50rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 283rpx; height: 336rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[1].img"
							style="height: 230rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="width: 283rpx; height: 336rpx"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 283rpx; height: 336rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[2].img"
							style="height: 230rpx"
							mode="heightFix"
						></image>
					</view>
				</view>
			</view>
			<!-- 十抽 -->
			<view v-else-if="cardsnum == 10" class="ten-draw">
				<view class="ten-draw-top">
					<view
						class="card-item"
						style="
							width: 200rpx;
							height: 230rpx;
							margin-bottom: 45rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[1].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="
							width: 200rpx;
							height: 230rpx;
							margin-bottom: 45rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[4].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="width: 200rpx; height: 230rpx"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[7].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
				</view>
				<view class="ten-draw-center">
					<view
						class="card-item"
						style="
							width: 200rpx;
							height: 230rpx;
							margin-bottom: 45rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[0].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="
							width: 200rpx;
							height: 230rpx;
							margin-bottom: 45rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[3].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="
							width: 200rpx;
							height: 230rpx;
							margin-bottom: 45rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[6].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="width: 200rpx; height: 230rpx"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[9].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
				</view>
				<view class="ten-draw-bottom">
					<view
						class="card-item"
						style="
							width: 200rpx;
							height: 230rpx;
							margin-bottom: 45rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[2].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="
							width: 200rpx;
							height: 230rpx;
							margin-bottom: 45rpx;
						"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[5].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
					<view
						class="card-item"
						style="width: 200rpx; height: 230rpx"
					>
						<view
							class="card-front tx-card-bg"
							style="width: 200rpx; height: 230rpx"
							:class="{
								'second-rotate-content': secondShow,
							}"
						>
						</view>
						<view
							class="card-bg"
							:class="{ 'second-rotate-bg': secondShow }"
							style="width: 200rpx; height: 230rpx"
						>
						</view>
						<image
							class="card-content"
							:class="{ 'second-rotate-content': secondShow }"
							:src="haveDraw[8].img"
							style="height: 156rpx"
							mode="heightFix"
						></image>
					</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<view class="button" @click="backto"> 开心收下 </view>
			<view class="button" @click="payPOP"> 再来一次 </view>
		</view>

		<!-- 支付弹出层 -->
		<uni-popup ref="paypopup" type="bottom" @change="changePop">
			<view class="paypopup-content">
				<view class="top-boxinfo">
					<view class="boxinfo-left">
						<image
							style="width: 184rpx; height: 184rpx"
							:src="drawImg"
							mode=""
						></image>
					</view>
					<view class="boxinfo-right">
						<view class="boxinfo-right-top">
							<view
								class=""
								style="
									margin-bottom: 21rpx;
									font-size: 26rpx;
									color: #e1e1e1;
								"
							>
								{{ drawName }}
							</view>
							<view
								class=""
								style="font-size: 20rpx; color: #aba9a9"
							>
								不支持七天无理由退货·无法回收
							</view>
						</view>
						<view class="boxinfo-right-bottom">
							<text
								style="
									margin-right: 37rpx;
									font-size: 24rpx;
									color: #e1e1e1;
								"
								>购买数量</text
							>
							<text style="font-size: 24rpx; color: #9e77f6"
								>{{ cardsnum }}次</text
							>
						</view>
					</view>
				</view>
				<view class="choose-coupon">
					<text style="font-size: 24rpx; color: #e1e1e1"
						>选择优惠券</text
					>
					<text
						v-if="!couponname"
						style="font-size: 24rpx; color: #c7c6c6"
						@click="chooseCoupon"
						>选择优惠券></text
					>
					<text
						v-else
						style="font-size: 24rpx; color: #c7c6c6"
						@click="chooseCoupon"
						>{{ couponname }}</text
					>
				</view>
				<view class="pays">
					<view class="pays-title"> 支付方式 </view>
					<radio-group @change="radioChange">
						<view class="radio-item">
							<view class="radio-item-left">
								<image
									style="
										width: 46rpx;
										height: 37rpx;
										margin-right: 11rpx;
									"
									src="../../static/xinshi.png"
									mode=""
								></image>
								<text style="font-size: 26rpx">卡尘代付</text>
							</view>
							<view>
								<text
									style="
										margin-right: 18rpx;
										font-size: 22rpx;
									"
									>{{ balance }}</text
								>
								<radio
									style="transform: scale(0.8)"
									value="3"
									:checked="pay_type == 3"
								/>
							</view>
						</view>
						<view class="radio-item">
							<view class="radio-item-left">
								<image
									style="
										width: 48rpx;
										height: 48rpx;
										margin-right: 11rpx;
										border-radius: 50%;
									"
									src="../../static/weixinpay2.png"
									mode=""
								></image>
								<text style="font-size: 26rpx">微信支付</text>
							</view>
							<view>
								<radio
									style="transform: scale(0.8)"
									value="1"
									:checked="pay_type == 1"
								/>
							</view>
						</view>
					</radio-group>
				</view>
				<view class="paybutton" @click="goDrawCards">
					<view class="" v-if="pay_type == 1">
						<span>确认支付(</span>
						<span style="text-decoration: line-through">{{
							realmoney
						}}</span>
						<span>)优惠{{ preferential }}</span>
					</view>
					<view class="" v-else>
						{{ `确认支付${realmoney}` }}
					</view>
				</view>
				<view class="pays-agree">
					<radio
						@click="changeAgree"
						style="transform: scale(0.8)"
						value="r1"
						:checked="agree"
					/>本人已满18岁，已阅读并同意<text @click="goRule(2)"
						>《用户协议》</text
					>和<text @click="goRule(8)">《预售条款》</text>
				</view>
			</view>
		</uni-popup>
		<!-- 实名制出层 -->
		<uni-popup ref="namepopup" type="center">
			<view class="namepopup-content">
				<view class="namepopup-title"> 提示 </view>
				<view class="namepopup-content-tow">
					鉴于您是平台的优质用户，为了能给您提供更好的服务体验，请先完成实名制认证。</view
				>
				<view class="namepopup-button">
					<view class="" @click="namepopup.close('center')">
						再想一下
					</view>
					<view class="" @click="goRealName"> 确认实名 </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	// 卡片背景
	.tx-card-bg {
		background: url('https://ojqn.wm2177.com/wechat_imgs/tx-card-bg.png')
			no-repeat;
		background-size: contain;
	}
	// 传说
	.chuan-shuo {
		background: url('https://ojqn.wm2177.com/wechat_imgs/wx/SSR.png')
			no-repeat;
		background-size: contain;
	}
	// 稀有
	.xi-you {
		background: url('https://ojqn.wm2177.com/wechat_imgs/wx/SR.png')
			no-repeat;
		background-size: contain;
	}
	// 普通
	.normal {
		background: url('https://ojqn.wm2177.com/wechat_imgs/wx/R.png')
			no-repeat;
		background-size: contain;
	}
	//重复动画
	.second-rotate-content {
		animation: rotateOnce 2s ease-out forwards;
	}
	.second-rotate-bg {
		animation: rotateBg 2s ease-out forwards;
	}
	.second-top-display {
		animation: displayTop 2s ease-out forwards 2s;
	}
	.second-scroll {
		animation: scroll-left 1s ease-out forwards;
	}
	/* 定义旋转动画 */
	@keyframes rotateOnce {
		0% {
			transform: rotateY(0deg);
		}
		25% {
			transform: rotateY(90deg);
		}
		50% {
			transform: rotateY(180deg);
		}
		75% {
			transform: rotateY(270deg);
		}
		100% {
			transform: rotateY(360deg);
		}
	}

	@keyframes displayTop {
		from {
			opacity: 0;
			// display: none;
		}
		to {
			opacity: 1;
			// display: block;
		}
	}
	@keyframes rotateBg {
		0% {
			transform: rotateY(0deg);
		}
		25% {
			transform: rotateY(90deg);
		}
		50% {
			transform: rotateY(180deg);
		}
		75% {
			transform: rotateY(270deg);
		}
		100% {
			transform: rotateY(360deg);
		}
	}
	@keyframes scroll-left {
		0% {
			transform: translateX(100%);
		}
		100% {
			transform: translateX(0%);
		}
	}
	.draw-video {
		position: relative;
		height: 100vh;
		width: 100%;
		video {
			height: 100%;
			width: 100%;
		}
		.skipvideo {
			width: 215rpx;
			height: 65rpx;
			background: url('https://ojqn.wm2177.com/wechat_imgs/skipvideo.png')
				no-repeat;
			background-size: contain;
			position: absolute;
			top: 200rpx;
			right: 0;
		}
		::v-deep #myVideo::-webkit-media-controls {
			display: none !important;
		}
	}
	.cards-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		width: 100%;
		padding-top: 170rpx;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		background: url('https://ojqn.wm2177.com/wechat_imgs/cards-bg.png')
			no-repeat;
		background-size: 100%;
		.congratulation {
			height: 150rpx;
			width: 100%;
			background: url('https://ojqn.wm2177.com/wechat_imgs/congratulation.png')
				no-repeat;
			background-size: contain;
			// animation: scroll-left 1s ease-out forwards;
		}
		.cards {
			flex: 1;
			.one-draw {
				// position: relative;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				margin-top: 230rpx;
				.card-item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					.card-front {
						position: absolute;
						top: 0;
						left: 0;
						width: 393rpx;
						height: 465rpx;
						z-index: 1;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
					.card-bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 393rpx;
						height: 465rpx;
						// z-index: -1;
						background: url('https://ojqn.wm2177.com/wechat_imgs/card-bg.png')
							no-repeat;
						background-size: contain;
						// backface-visibility: hidden;
						// animation: rotateBg 2s ease-out forwards;
					}
					.card-content {
						position: absolute;
						// top: 0;
						// left: 0;
						z-index: 2;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
					.card-png {
						position: absolute;
						top: 0;
						left: 0;
						width: 393rpx;
						height: 465rpx;
						z-index: 2;
						background-size: contain !important;
						background-repeat: no-repeat !important;
					}
				}
			}
			.three-draw {
				// position: relative;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				margin-top: 81rpx;
				.card-item-top {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 44rpx;
				}
				.card-item-bottom {
					display: flex;
					align-items: center;
				}
				.card-item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					.card-front {
						position: absolute;
						top: 0;
						left: 0;
						width: 283rpx;
						height: 336rpx;
						z-index: 1;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
					.card-bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 283rpx;
						height: 336rpx;
						// z-index: -1;
						background: url('https://ojqn.wm2177.com/wechat_imgs/card-bg.png')
							no-repeat;
						background-size: contain;
						// backface-visibility: hidden;
						// animation: rotateBg 2s ease-out forwards;
					}
					.card-content {
						position: absolute;
						// top: 0;
						// left: 0;
						z-index: 2;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
				}
			}
			.five-draw {
				// position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 130rpx;
				.five-draw-top {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 15rpx;
				}
				.five-draw-center {
					margin-right: 15rpx;
				}
				.five-draw-bottom {
					display: flex;
					align-items: center;
					flex-direction: column;
				}
				.card-item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					.card-front {
						position: absolute;
						top: 0;
						left: 0;
						width: 220rpx;
						height: 270rpx;
						z-index: 1;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
					.card-bg {
						position: absolute;
						top: 0;
						left: 0;
						// width: 283rpx;
						// height: 336rpx;
						// z-index: -1;
						background: url('https://ojqn.wm2177.com/wechat_imgs/card-bg.png')
							no-repeat;
						background-size: contain;
						// backface-visibility: hidden;
						// animation: rotateBg 2s ease-out forwards;
					}
					.card-content {
						position: absolute;
						// top: 0;
						// left: 0;
						z-index: 2;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
				}
			}
			.ten-draw {
				// position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.ten-draw-top {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 15rpx;
				}
				.ten-draw-center {
					margin-right: 15rpx;
				}
				.ten-draw-bottom {
					display: flex;
					align-items: center;
					flex-direction: column;
				}
				.card-item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					.card-front {
						position: absolute;
						top: 0;
						left: 0;
						width: 220rpx;
						height: 270rpx;
						z-index: 1;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
					.card-bg {
						position: absolute;
						top: 0;
						left: 0;
						// width: 283rpx;
						// height: 336rpx;
						// z-index: -1;
						background: url('https://ojqn.wm2177.com/wechat_imgs/card-bg.png')
							no-repeat;
						background-size: contain;
						// backface-visibility: hidden;
						// animation: rotateBg 2s ease-out forwards;
					}
					.card-content {
						position: absolute;
						// top: 0;
						// left: 0;
						z-index: 2;
						backface-visibility: hidden;
						// animation: rotateOnce 2s ease-out forwards;
					}
				}
			}
		}
		.button-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 98rpx;
			.button {
				height: 100%;
				width: 302rpx;
				font-size: 38rpx;
				font-weight: 900;
				text-align: center;
				line-height: 90rpx;
				&:first-child {
					background: url('https://ojqn.wm2177.com/wechat_imgs/btn-left.png')
						no-repeat;
					background-size: contain;
					margin-right: 50rpx;
					color: #9146a0;
				}
				&:last-child {
					background: url('https://ojqn.wm2177.com/wechat_imgs/btn-right.gif')
						no-repeat;
					background-size: contain;
					color: #7c4600;
				}
			}
		}
		.paypopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 771rpx;
			padding: 63rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(26, 19, 63, 0.9);
			color: #e1e1e1;
			.top-boxinfo {
				width: 100%;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				.boxinfo-left {
					width: 184rpx;
					height: 184rpx;
					border-radius: 6rpx;
					overflow: hidden;
					margin-right: 12rpx;
				}
				.boxinfo-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 180rpx;
				}
			}
			.choose-coupon {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 47rpx;
				flex-shrink: 0;
			}
			.pays {
				width: 100%;
				.pays-title {
					margin: 24rpx 0 13rpx 0;
					font-size: 24rpx;
				}
				.radio-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 13rpx 0;

					border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
					&:last-child {
						border: none;
					}
					.radio-item-left {
						display: flex;
						align-items: center;
					}
				}
			}
			.paybutton {
				width: 100%;
				height: 109rpx;
				margin-top: 32rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/paybutton.png')
					no-repeat;
				background-size: contain;
				font-weight: 800;
				font-size: 38rpx;
				color: #9146a0;
				line-height: 96rpx;
				text-align: center;
				// text-stroke: 1rpx #FFFFFF;
				// -webkit-text-stroke: 1rpx #FFFFFF;
			}
			.pays-agree {
				width: 100%;
				margin-top: 29rpx;
				font-size: 20rpx;
				color: #e1e1e1;
				text-align: center;
			}
		}
	}
	.namepopup-content {
		width: 600rpx;
		height: 404rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 36rpx;
		background-color: #fff;
		.namepopup-title {
			height: 114rpx;
			border-bottom: 1px solid #d8d8d8;
			text-align: center;
			font-size: 40rpx;
			line-height: 114rpx;
			color: black;
		}
		.namepopup-content-tow {
			height: 164rpx;
			padding-top: 32rpx;
			box-sizing: border-box;
			text-align: center;
			font-size: 28rpx;
			color: #9b9b9d;
		}
		.namepopup-button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;
			// margin-top: 26rpx;
			view {
				width: 234rpx;
				height: 80rpx;
				background-color: $all-color;
				border-radius: 40rpx;
				text-align: center;
				font-size: 26rpx;
				font-weight: 700;
				line-height: 80rpx;
				&:first-child {
					border: 2rpx solid $all-color;
					background-color: #fff;
					color: $all-color;
				}
			}
		}
	}
</style>